<template>
    <div class="sdy-home-goods-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            class="goods-list-box"
            v-model:loading="loading"
            :finished="finished"
            :offset="100"
            finished-text="没有更多了"
            @load="loadGoodsListHandler">
            <div 
            class="goods-item"
            v-for ="item in goodsList"
            :key="item.proid"
            >
            <img :src="item.img1" alt="">
            <p class="title van-multi-ellipsis--l2">
                {{item.proname}}
            </p>
           <p class="price">
            <span class="current">
                ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
            </span>
            <span class="old">
              ￥ {{ item.originprice.toFixed(2) }}
            </span>
          </p>
          <p class="tags">
            <van-tag type="danger">{{ item.category }}</van-tag>
            <van-tag type="primary">{{ item.brand }}</van-tag>
           </p>
            </div>
            </van-list>
    </van-pull-refresh>
</div>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import {goodsListApi} from '@/api/goods'
import type {MyHotItem} from '@/config/interface'
//加载数据的时候, 会自动把 loading 设置为 true
// 当加载完以后把loading修改为false
const loading =ref<boolean>(false)
const finished =ref<boolean>(false)
// 准备一个变量存储商品列表
// 准备一个数据表示请求相关信息
const goodsInfo = reactive({count:1,limitNum:10})
const goodsList=ref<MyHotItem[]>([])
// 准备一个变量，表示下拉刷新
const refreshing = ref<boolean>(false)
// 滚动到底部的时候触发
const loadGoodsListHandler =async()=>{
    setTimeout(async()=>{
        const res =await goodsListApi(goodsInfo)
        // 注意：不能直接替换数组，而是把本次内容拼接在上一次
        console.log(res);
        
        goodsList.value =[...goodsList.value,...res.data]
        // 修改页数
        goodsInfo.count++
        // 把加载完毕的状态修改为false
        loading.value =false
        // 判断一下，如果res.data的length为空，那么不需要再次loading了
        if(!res.data.length)finished.value =true
    }, Math.random()*1000 + 2000)
}
const onRefresh = () =>{
    setTimeout(async() =>{
    // 模拟一个 2 ~ 7 的随机数
    // 注意: 不应该依赖前端变化, 依赖后端变化
        goodsInfo.count =Math.floor(Math.random()*5+2)
        // 请求数据
        const res = await goodsListApi(goodsInfo)
        // 因为是刷新一个新的页面不需要拼接，直接完整替换
        goodsList.value = res.data
        // 让当前页++
        goodsInfo.count++
        // 让下拉刷新控制变量换成false
        refreshing.value = false
    }, Math.random() * 1000 + 2000)
    
}
</script>
<style scoped lang="scss">
    .sdy-home-goods-list{
        box-sizing: border-box;
        padding: 0 15px;
      .goods-list-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .goods-item{
            width: 45%;
            border: 1px solid #333;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            overflow: hidden;
            padding-bottom: 5px;
            >p{
                margin: 0;
            }
            >img{
                width: 100%;
                height: 170px;
                display: block;
            }
            >title{
                font-size: 12px;
            }
            >.price{
                font-size:12px;
                color: #ccc;
                display: flex;
                justify-content: space-evenly;
                >.current{
                    font-size: 16px;
                    color: #c72418;
                }
                >.old{
                    text-decoration: line-through;
                }
            }
            >.tags{
                width: 100%;
                display: flex;
                justify-content: space-evenly;
            }
        }
      }
    }
</style>